<%@page import="bookStore.tool.Constants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>简约书评网后台管理</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap5/bootstrap.min.css" rel="stylesheet">


<script src="js/bootstrap5/bootstrap.bundle.min.js"></script>
<style>
body {
	min-height: 100vh;
	min-height: -webkit-fill-available
}

html {
	height: -webkit-fill-available
}

main {
	display: flex;
	flex-wrap: nowrap;
	height: 100vh;
	height: -webkit-fill-available;
	max-height: 100vh;
	overflow-x: auto;
	overflow-y: hidden
}

.b-example-divider {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em
		rgba(0, 0, 0, .15)
}

.bi {
	vertical-align: -.125em;
	pointer-events: none;
	fill: currentColor
}

.dropdown-toggle {
	outline: 0
}

.nav-flush .nav-link {
	border-radius: 0
}

.btn-toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem .5rem;
	font-weight: 600;
	color:#ffffff;
	background-color: transparent;
	border: 0
}

.btn-toggle:hover, .btn-toggle:focus {
	color: rgba(0, 0, 0, .85);
	background-color: #ffa500;
	width:100%
}

.btn-toggle::before {
	width: 1.25em;
	line-height: 0;
	
	transition: transform .35s ease;
	transform-origin: .5em 50%
}

.btn-toggle[aria-expanded="true"] {
	color: #ffffff
}

.btn-toggle[aria-expanded="true"]::before {
	transform: rotate(90deg)
}

.btn-toggle-nav a {
	display: inline-flex;
	padding: .1875rem .5rem;
	margin-top: .125rem;
	margin-left: 1.25rem;
	text-decoration: none
}

.btn-toggle-nav a:hover, .btn-toggle-nav a:focus {
	background-color: #ffa500
}

.scrollarea {
	overflow-y: auto
}

.fw-semibold {
	font-weight: 600
}

.lh-tight {
	line-height: 1.25
}

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

@media ( min-width :768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem
	}
}
</style>
</head>
<body>


	<main>
		


		<div class="flex-shrink-0 p-3" style="width: 180px;background:#140548">
			<a href="/"
				class="d-flex align-items-center pb-3 mb-3 link-light text-decoration-none border-bottom">
				<i class="fa fa-book text-primary"></i> &nbsp;<span
				class="fs-7 fw-semibold">后台管理</span>
			</a>
			<ul class="list-unstyled ps-0">
				<li class="mb-1">
					<button class="btn btn-toggle align-items-center rounded collapsed"
						data-bs-toggle="collapse" data-bs-target="#home-collapse"
						aria-expanded="true">图书管理</button>
					<div class="collapse show" id="home-collapse">
						<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
							<li><a href="#" onclick="changeFrame('bookManager/list?pager.offset=0&pageSize=<%=Constants.PAGE_SIZE%>') " class="link-light rounded">图书列表</a></li>
							<li><a href="#" onclick="changeFrame('bookManager/toSaveForm') " class="link-light rounded">添加图书</a></li>
						</ul>
					</div>
				</li>
				<li class="mb-1">
					<button class="btn btn-toggle align-items-center rounded collapsed"
						data-bs-toggle="collapse" data-bs-target="#dashboard-collapse"
						aria-expanded="false">作者管理</button>
					<div class="collapse" id="dashboard-collapse">
						<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
							<li><a href="#" class="link-light rounded">作者列表</a></li>
							<li><a href="#" class="link-light rounded">添加作者</a></li>

						</ul>
					</div>
				</li>
				<li class="mb-1">
					<button class="btn btn-toggle align-items-center rounded collapsed"
						data-bs-toggle="collapse" data-bs-target="#orders-collapse"
						aria-expanded="false">用户管理</button>
					<div class="collapse" id="orders-collapse">
						<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
							<li><a href="#" onclick="changeFrame('userManager/list?pager.offset=0&pageSize=${Constants.PAGE_SIZE}')" class="link-light rounded">用户列表</a></li>
							<li><a href="#" class="link-light rounded">添加用户</a></li>
							
						</ul>
					</div>
				</li>

		
			</ul>
		</div>


		
			<iframe src="welcome.jsp" height="100%" width="100%" scrolling="auto"
				frameborder="0" id="iframe"  onload="changeFrameHeight()"> </iframe>

		
	</main>

	<script>
		function changeFrameHeight() {
			var iframe = document.getElementById("iframe");
			iframe.height = document.documentElement.clientHeight;
		}

		window.onresize = function() {
			changeFrameHeight();
		}

		function changeFrame(url){
			document.getElementById("iframe").src=url;
		}
		/* global bootstrap: false */
		(
				function() {
					'use strict'
					var tooltipTriggerList = [].slice.call(document
							.querySelectorAll('[data-bs-toggle="tooltip"]'))
					tooltipTriggerList.forEach(function(tooltipTriggerEl) {
						new bootstrap.Tooltip(tooltipTriggerEl)
					})
				})()
	</script>
</body>
</html>